<template>
  <div class="home">
    <div class="home_top">
      <div class="top_input">
        <van-icon class="top_icon" name="search" />
        <input type="text" placeholder="皮肤过敏" />
      </div>
    </div>
    <div class="home_main">
      <!-- 轮播图 -->
      <div class="main_img">
        <van-swipe :autoplay="3000" lazy-render>
          <van-swipe-item v-for="image in imagess" :key="image">
            <img class="tagImg" :src="image" />
          </van-swipe-item>
        </van-swipe>
      </div>
      <!-- 找医生 -->
      <div class="home_find_doctor">
        <div class="doctor_left">
          <dl>
            <dt><img src="../../assets/img/home/home_03.jpg" alt="" /></dt>
            <dd>
              <h2>快速提问</h2>
              <p>智能匹配医生</p>
            </dd>
          </dl>
        </div>
        <div class="doctor_right">
          <dl>
            <dt><img src="../../assets/img/home/home_05.jpg" alt="" /></dt>
            <dd>
              <h2>找医生</h2>
              <p>全国60+医生</p>
            </dd>
          </dl>
        </div>
      </div>
      <!-- nav列表 -->
      <div class="home_nav">
        <dl>
          <dt><img src="../../assets/img/home/home_16.jpg" alt="" /></dt>
          <dd>找医院</dd>
        </dl>
        <dl>
          <dt><img src="../../assets/img/home/home_16.jpg" alt="" /></dt>
          <dd>抗疫专区</dd>
        </dl>
        <dl>
          <dt><img src="../../assets/img/home/home_16.jpg" alt="" /></dt>
          <dd>快速购药</dd>
        </dl>
        <dl>
          <dt><img src="../../assets/img/home/home_16.jpg" alt="" /></dt>
          <dd>图文急诊</dd>
        </dl>
        <dl>
          <dt><img src="../../assets/img/home/home_16.jpg" alt="" /></dt>
          <dd>快捷电话</dd>
        </dl>
      </div>
      <!-- 春雨活动 -->
      <div class="home_activity">
        <h3>春雨活动</h3>
        <p>发给你的：可能对光反射，课件崩溃</p>
      </div>
      <!-- 特色科室 -->
      <div class="home_social">
        <div class="home_office">
          <h3>特色科室</h3>
          <p>查看全部></p>
        </div>
        <div class="home_allImg">
          <div class="home_left">
            <img class="img1" src="../../images/1_03.jpg" alt />
            <img class="img2" src="../../images/1_09.jpg" alt />
          </div>
          <div class="home_right">
            <img src="../../images/1_05.jpg" alt />
            <img src="../../images/1_07.jpg" alt />
            <img src="../../images/1_10.jpg" alt />
          </div>
        </div>
      </div>
      <!-- 医生话题 -->
      <div class="home_doctor">
        <div class="home_talk">
          <h3>医生话题</h3>
          <p>查看全部></p>
        </div>
        <div class="home_list">
          <ul v-for="(item, index) in doctor_talk" :key="index">
            <li class="home_list_one">【{{ item.type }}】{{ item.title }}</li>
            <li class="home_list_two">
              <p>{{ item.author }} {{ item.address }}</p>
              <p>阅读 {{ item.read }} 点赞{{ item.like }}</p>
            </li>
          </ul>
        </div>
      </div>
      <!-- 患者好评 -->
      <div class="home_patient">
        <div class="home_talk">
          <h3>患者好评</h3>
          <p>换一换</p>
        </div>
        <div class="home_list">
          <ul>
            <li v-for="(item, index) in patient_talk" :key="index">
              <p class="title">
                <span>
                  <!-- <img v-lazy="item.avatar" alt="" /> -->
                  <span class="username"
                    >{{ item.name.slice(0, 1) }}****{{
                      item.name.slice(-4)
                    }}</span
                  >
                  <span class="msg">给{{ item.to }}医生送心意</span>
                </span>
                <span class="good">好评</span>
              </p>
              <p class="text">{{ item.text }}</p>
            </li>
          </ul>
        </div>
      </div>
      <!-- 底部服务保障 -->
      <div class="home_bottom">
        <div class="service">
          <h4>服务保障</h4>
          <p>
            <span>严格审核</span>
            <span>专业问诊</span>
            <span>放心药品</span>
          </p>
          <div>&gt;</div>
        </div>
        <div class="sum">
          <div class="text">
            <p>
              累计注册
              <span>{{ doctorNum }}</span
              >位医生
            </p>
            <p>
              共服务
              <span>{{ userNum }}</span
              >位用户
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
  setup() {
    const imagess = [
      'https://img.yzcdn.cn/vant/apple-1.jpg',
      'https://img.yzcdn.cn/vant/apple-2.jpg'
    ]
    return {
      imagess,
      images: [
        'https://img.yzcdn.cn/vant/apple-1.jpg',
        'https://img.yzcdn.cn/vant/apple-2.jpg'
      ],
      doctor_talk: [
        // 医生话题
        {
          type: '科普',
          title: '地方和今后今日？',
          address: '哈尔滨大学第一医院',
          like: 100,
          read: 200,
          author: '张淑红'
        }
      ],
      patient_talk: [
        {
          // avatar:require('../../assets/img/img.png'),
          name: '我是7743131321',
          to: '张媛',
          text: '医生很有善，急病人之所急，不仅业务能力强，而且还能设身处地为病人着想！真正的好医生！'
        },
        {
          // avatar:require('../../assets/img/img.png'),
          name: '我是7743131321',
          to: '张媛',
          text: '医生很有善，急病人之所急，不仅业务能力强，而且还能设身处地为病人着想！真正的好医生！'
        },
        {
          // avatar:require('../../assets/img/img.png'),
          name: '我是7743131321',
          to: '张媛',
          text: '医生很有善，急病人之所急，不仅业务能力强，而且还能设身处地为病人着想！真正的好医生！'
        },
        {
          // avatar:require('../../assets/img/img.png'),
          name: '我是7743131321',
          to: '张媛',
          text: '医生很有善，急病人之所急，不仅业务能力强，而且还能设身处地为病人着想！真正的好医生！'
        }
      ]
    }
  }
})
</script>

<style lang='scss' scoped>
.home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  background-color: #ffffff;
  .home_top {
    width: 100%;
    height: 0.55rem;
    margin-top: 0.26rem;
    .top_input {
      width: 6.9rem;
      height: 0.55rem;
      background-color: #f0f0f0;
      margin-left: 0.28rem;
      border-radius: 0.4rem;
      .top_icon {
        line-height: 0.45rem;
        margin-left: 0.18rem;
        color: #afafaf;
        margin-top: 0.05rem;
      }
      input {
        width: 5rem;
        margin-left: 0.2rem;
        line-height: 0.45rem;
        background-color: #f0f0f0;
        color: #4c4c4c;
        border: none;
        outline: none;
      }
    }
  }
  .main_img {
    margin-top: 0.33rem;
  }
  .tagImg {
    width: 6.94rem;
    height: 1.96rem;
    margin-left: 0.28rem;
    margin-top: 0.34rem;
  }
  // input{
  //   width: 93%;
  //   height: 0.6rem;
  //   border-radius: 0.3rem;
  //   border: none;
  //   background: #efefef;
  //   margin-top: 0.2rem;
  //   margin-left: 0.2rem;
  //   outline: none;
  // }
  .home_main {
    flex: 1;
    overflow-x: scroll;
  }
  .home_img {
    width: 100%;
    height: 3rem;
    img {
      width: 100%;
      height: 3rem;
    }
  }
  .home_find_doctor {
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 1.7rem;
    margin-top: 0.3rem;
    .doctor_left {
      width: 3.4rem;
      height: 1.68rem;
      background-color: #fff;
      border-radius: 0.4rem;
      dl {
        width: 3.54rem;
        height: 0.84rem;
        display: flex;
        margin-left: 0.3rem;
        margin-top: 0.45rem;
        dt {
          width: 0.87rem;
          height: 0.83rem;
          img {
            width: 100%;
            height: 100%;
          }
        }
        dd {
          margin-left: 0.2rem;
          h2 {
            font-size: 0.38rem;
          }
          p {
            font-size: 0.23rem;
            color: #ccc;
          }
        }
      }
    }
    .doctor_right {
      width: 3.4rem;
      height: 1.7rem;
      background-color: #fff;
      border-radius: 0.4rem;
      dl {
        width: 3rem;
        height: 0.84rem;
        display: flex;
        margin-top: 0.45rem;
        margin-left: 0.3rem;
        dt {
          width: 0.87rem;
          height: 0.83rem;
          img {
            width: 100%;
            height: 100%;
          }
        }
        dd {
          margin-left: 0.2rem;
          h2 {
            font-size: 0.38rem;
          }
          p {
            font-size: 0.23rem;
            color: #ccc;
          }
        }
      }
    }
  }
  // 首页nav列表
  .home_nav {
    width: 100%;
    height: 1.08rem;
    margin-top: 0.4rem;
    display: flex;
    dl {
      width: 0.98rem;
      height: 1.06rem;
      margin-left: 0.45rem;
      dt {
        width: 0.45rem;
        height: 0.5rem;
        img {
          width: 100%;
          height: 100%;
          margin-left: 0.2rem;
        }
      }
      dd {
        font-size: 0.24rem;
      }
    }
  }
  .home_activity {
    width: 100%;
    height: 1rem;
    background: #f7fbff;
    margin-top: 0.2rem;
    border-radius: 0.2rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    h3 {
      color: #31d363;
      font-size: 0.34rem;
    }
    p {
      font-size: 0.32rem;
    }
  }
  .home_social {
    width: 100%;
    height: 8rem;
    //特色科室
    // background: red;
    .home_office {
      width: 100%;
      height: 0.8rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #fff;
      margin-top: 0.4rem;
      h3 {
        font-weight: 1400;
      }
      p {
        font-size: 0.32rem;
        color: #aaa;
      }
    }
    .home_allImg {
      width: 100%;
      height: 6rem;
      margin-top: 0.2rem;

      display: flex;
      .home_left {
        width: 46%;
        height: 5rem;
        margin-left: 0.2rem;
        .img1 {
          width: 100%;
          height: 4.2rem;
          margin-top: 0.18rem;
        }
        .img2 {
          width: 100%;
          height: 2rem;
          margin-top: 0.12rem;
        }
      }
      .home_right {
        width: 48%;
        height: 5rem;
        text-align: center;
        margin-left: 0.2rem;
        img {
          width: 100%;
          height: 2rem;
          margin-top: 0.1rem;
        }
      }
    }
  }
  .home_doctor {
    width: 100%;
    background: #fff;
    // background: chartreuse;
    //医生话题============
    .home_talk {
      width: 100%;
      height: 1rem;
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 0.12rem;
      h3 {
        font-weight: 1400;
      }
      p {
        font-size: 0.3rem;
        color: #aaa;
      }
    }
    .home_list {
      width: 100%;
      //   height: 2.8rem;
      .home_list_one {
        width: 100%;
        height: 0.6rem;
        margin: 0.06rem 0;
        font-size: 0.36rem;
        display: flex;
        align-items: center;
        background: #fff;
      }
      .home_list_two {
        width: 100%;
        height: 0.8rem;
        padding: 0 0.32rem;
        background: rgb(247, 245, 245);
        border-radius: 0.1rem;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin: 0.2rem 0;
        p {
          font-size: 0.28rem;
          color: #aaa;
        }
      }
    }
  }
  .home_patient {
    //患者好评===================
    width: 100%;
    margin-top: 0.6rem;
    font-size: 0.2rem;
    .home_talk {
      width: 100%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      h3 {
        font-weight: 800;
        font-size: 0.5rem;
      }
    }
    .home_list {
      width: 100%;
      li {
        border-bottom: 0.02rem solid #ccc;
        padding: 0.2rem 0;
      }
      .title {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        span {
          font-size: 0.24rem;
          display: flex;
          align-items: center;
          img {
            border-radius: 50%;
            width: 0.52rem;
            height: 0.52rem;
          }
        }
        .username {
          margin: 0 0.12rem;
          font-size: 0.28rem;
        }
        .msg {
          color: #ccc;
        }
        .good {
          color: rgb(255, 162, 56);
        }
      }
      .text {
        font-size: 0.32rem;
        margin-top: 0.2rem;
      }
    }
  }
  .home_bottom {
    //首页底部=================
    width: 100%;
    padding: 0.4rem 0;
    font-size: 0.28rem;
    .service {
      background: rgb(250, 248, 248);
      display: flex;
      justify-content: space-between;
      align-items: center;
      border-radius: 0.1rem;
      padding: 0.16rem;
      margin-bottom: 0.02rem;
      p {
        flex: 1;
        margin: 0 0.76rem;
        display: flex;
        justify-content: space-between;
      }
      h4 {
        font-weight: 1600;
        font-size: 0.28rem;
      }
    }
    .sum {
      background: rgb(250, 248, 248);
      display: flex;
      justify-content: space-around;
      align-content: center;
      border-radius: 0.1rem;
      padding: 0.16rem;
      .text {
        p {
          font-size: 0.24rem;
        }
        span {
          color: rgb(84, 247, 92);
        }
      }
    }
  }
}
</style>
